<template>
	<view class="dizhi">
		<ul class="dizhi-shang">
			<li v-for="(item,index) in data" :key="index" @click="bianji(index+1)">
				<div class="dizhi-shang-left">
					<h1>{{item.name}} {{item.phone}}</h1>
					<span v-if="item.flag==='true'">默认地址</span>
					<p>{{item.addres}} {{item.house}}</p>
				</div>
				<div class="dizhi-shang-right">
					<img src="../../static/img/7.png" alt="">
				</div>
			</li>
		</ul>
		<div class="dizhi-bottom">
			<button @click="tianjia">+添加地址</button>
		</div>
	</view>
</template>

<script>
	import request from "../../utils/request.js"
	export default {
		data() {
			return {
				data: []
			}
		},
		methods: {
			tianjia() {
				uni.navigateTo({
					url: '/pages/home/dizhis'
				});
			},
			bianji(index) {
				uni.navigateTo({
					url: `/pages/home/dizhis?id=${index}`
				});
			}
		},
		async created() {
			let data = await request("/froms/dizhi", {}, 'GET')
			this.data = data
		}
	}
</script>

<style scopet>
	.dizhi {
		width: 100vw;
		height: 100vh;
	}

	.dizhi-shang {
		width: 100%;
		height: calc(100% - 50px);
		background: #fff;
	}

	.dizhi-shang li {
		width: 100%;
		height: 100px;
		border-top: 5px solid #ccc;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.dizhi-shang-left {
		width: 85%;
		height: 100px;
		margin-left: 3%;
	}

	.dizhi-shang-left h1 {
		font-size: 16px;
		line-height: 40px;
		font-weight: 400;
	}

	.dizhi-shang-left span {
		display: inline-block;
		font-size: 12px;
		line-height: 20px;
		width: 70px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		color: rgb(255, 194, 120);
		background: rgb(255, 244, 229);
	}

	.dizhi-shang-left p {
		font-size: 16px;
		line-height: 40px;
		overflow: hidden;
	}

	.dizhi-shang-right {
		width: 15%;
		height: 100px;
		margin-right: 3%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.dizhi-shang-right img {
		width: 20px;
		height: 20px;
	}

	.dizhi-bottom {
		width: 94%;
		height: 50px;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.dizhi-bottom button {
		border: none;
		outline: none;
		width: 100%;
		height: 40px;
		font-size: 18px;
		background: #000000;
		color: #fff;
		line-height: 40px;
	}
</style>
